﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style type="text/css">
        ul {
            list-style: none;
        }

            ul li {
                margin-left: 20px;
                cursor: pointer;
                text-decoration: underline;
            }

        .c1 {
            background-color: blue;
        }

        .c2 {
            background-color: white;
        }
    </style>
    <script src="../Resource/JS/angular.1.2.0.min.js"></script>
</head>
<body ng-app="tab">
    <div ng-controller="tab_c">
        <ul ng-switch on="tag">
            <li ng-repeat="item in tabs" class="{{item.className}}" ng-click="change(item);">{{item.name}}</li>
        </ul>
        <div ng-repeat="item in tabs" style="float: left;">
            <div ng-if="tag == item.id" ng-repeat="one in item.content">
                <span>{{one.name}} -----{{one.age}}</span>

            </div>
        </div>
    </div>
</body>
</html>
<script>
    

        var app = angular.module("tab", []);
    window.onmousedown = function () {

        app.controller("tab_c", function ($scope, $rootScope) {
            $scope.tabs = [
                { name: "选项1", id: 1, className: 'c1', content: [{ name: 'aa', age: 1 }, { name: 'aa', age: 1 }] },
                { name: "选项2", id: 2, className: 'c2', content: [{ name: 'bb', age: 2 }, { name: 'bb', age: 2 }] },
                { name: "选项3", id: 3, className: 'c2', content: [{ name: 'cc', age: 3 }, { name: 'cc', age: 3 }] },
                { name: "选项4", id: 4, className: 'c2', content: [{ name: 'dd', age: 4 }, { name: 'dd', age: 4 }] }];

            $scope.tag = "1";

            $scope.change = function (obj) {
                for (var i = 0; i < $scope.tabs.length; i++) {
                    if (obj.name == $scope.tabs[i].name) {
                        $scope.tabs[i].className = "c1";
                    } else {
                        $scope.tabs[i].className = "c2";
                    }
                }
                $scope.tag = obj.id;
            }
        })
    }
</script>
